<template>
  <div class="login-container">
    <div class="login-card">
      <h2>登录</h2>
      <input v-model="username" placeholder="用户名" />
      <input v-model="password" type="password" placeholder="密码" />
      <button @click="handleLogin">登录</button>
      <p v-if="errorMsg" class="error">{{ errorMsg }}</p>
      <p class="demo-tip">
        演示账号:<br />
        用户名: admin, 密码: admin<br />
        用户名: test, 密码: 123456
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';

const username = ref('');
const password = ref('');
const errorMsg = ref('');

const auth = useAuthStore();
const router = useRouter();

const handleLogin = async () => {
  const success = await auth.login(username.value, password.value);
  if (success) {
    router.push('/todo');
  } else {
    errorMsg.value = '用户名或密码错误';
  }
};
</script>

<style scoped>
.login-container {
  /* 让卡片在页面垂直水平居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 85vh; 
  background-color: #f4f6f9; /* 浅灰色背景，和卡片区分开 */
}
.login-card {
  width: 360px; /* 卡片宽度，可按需调整 */
  background-color: #fff; 
  border-radius: 8px; 
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); 
  padding: 24px 32px; 
  text-align: center; 
}
.login-card h2 {
  margin-bottom: 20px;
  font-size: 20px;
  color: #333; 
}
.login-card input {
  width: 100%;
  padding: 10px 12px; 
  margin-bottom: 16px; 
  border: 1px solid #dcdcdc; 
  border-radius: 4px; 
  font-size: 14px; 
  box-sizing: border-box; 
}
/* 输入框聚焦样式，增强交互反馈 */
.login-card input:focus {
  outline: none;
  border-color: #999; 
}
.login-card button {
  width: 100%;
  padding: 10px 0; 
  background-color: #606c88; /* 按钮背景色，接近你示例中的深色 */
  color: #fff; 
  border: none;
  border-radius: 4px; 
  font-size: 14px; 
  cursor: pointer; 
}
/* 按钮 hover 效果，提升交互感 */
.login-card button:hover {
  background-color: #4b566b; 
}
.error {
  margin-top: 12px;
  color: #f44336; 
  font-size: 14px; 
}
.demo-tip {
  margin-top: 16px;
  color: #666; 
  font-size: 13px; 
  line-height: 1.6; 
}
</style>